//	水波图自定义配色

import React, { useState } from 'react';
import InputColorPicker from './InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const CustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	// const [ liquidBgColor, setLiquidBgColor ] = useState( ( config.style && config.style.liquidBgColor ) || '#000' );
	const [ liquidWaveColor, setLiquidWaveColor ] = useState( ( config.style && config.style.liquidWaveColor ) || '#639bff' );

	// const handleLiquidBgColorChange = ( color ) => {
	// 	setLiquidBgColor( color );
	// 	form.setFieldsValue( { liquidBgColor: color } );
	// 	onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	// };

	const handleLiquidWaveColorChange = ( color ) => {
		setLiquidWaveColor( color );
		form.setFieldsValue( { liquidWaveColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			{/*<FormItem label="背景颜色" name="liquidBgColor">*/}
			{/*	<InputColorPicker*/}
			{/*		color={ liquidBgColor }*/}
			{/*		change={ ( color ) => handleLiquidBgColorChange( color ) }*/}
			{/*	></InputColorPicker>*/}
			{/*</FormItem>*/}

			<FormItem label="波浪颜色" name="liquidWaveColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ liquidWaveColor }
					change={ ( color ) => handleLiquidWaveColorChange( color ) }
				></InputColorPicker>
			</FormItem>

		</div>
	);
};

export default React.memo( CustomColor );
